<template>
    <div class="page_content">
        <Banner
            :tabList="tabList"
            :bannerImg="bannerImg"
            :mainTitle="mainTitle"
        />
        <NuxtPage class="commonPageStyle" />
    </div>
</template>

<script setup>
import bannerImg from "/assets/image/news/news_banner.jpg";
const tabList = reactive([
    {
        title: () => t("common.text9"),
        path: "/news/group",
        key: "group",
    },
    {
        title: () => t("common.text10"),
        path: "/news/industry",
        key: "industry",
    },
    {
        title: () => t("common.text11"),
        path: "/news/brand",
        key: "brand",
    },
]);
const { t } = useI18n();
const mainTitle = computed(() => t("common.text8"));
</script>

<style lang="scss">
.commonPageStyle {
    .article_content {
        padding: 52px 0 80px;
        &-list {
            display: flex;
            justify-content: space-between;
            cursor: pointer;
            padding: 30px 0;
            position: relative;
            transition: all 0.4s ease;
            &::after {
                content: "";
                width: calc(100% - 160px - 60px);
                height: 1px;
                background: #ddd;
                position: absolute;
                bottom: 0;
                right: 0;
            }
            &:first-child {
                .article_content-left {
                    &::before {
                        height: calc(100% + 30px);
                        top: 0;
                    }
                }
            }
            .article_content-left {
                width: 160px;
                position: relative;
                &::before {
                    content: "";
                    width: 1px;
                    height: calc(100% + 60px);
                    background: #ddd;
                    position: absolute;
                    left: 160px;
                    top: -30px;
                }
                &::after {
                    content: "";
                    width: 1px;
                    height: 0%;
                    background: #0058ce;
                    position: absolute;
                    left: 160px;
                    opacity: 0;
                    top: 50%;
                    transition: all 0.4s ease;
                }
                span {
                    display: block;
                }
                .time {
                    color: #666;
                    transition: all 0.4s ease;
                    line-height: 1.1;
                    font-size: 24px;
                    padding-top: 30px;
                }
                .year {
                    color: #999;
                    line-height: 1.2;
                    margin-top: 8px;
                }
                .arrow {
                    width: 27px;
                    height: 14px;
                    margin-top: 4px;
                    background: url(/assets/image/news/newsjtArr.png) no-repeat
                        left top / 100% auto;
                }
            }
            .article_content-right {
                flex: 1;
                padding-left: 60px;
                padding-bottom: 30px;
                display: flex;
                align-items: flex-start;
                position: relative;
                overflow: hidden;
                h3 {
                    font-size: 18px;
                    color: #000;
                    transition: all 0.4s ease;
                    max-height: 60px;
                    // line-height: 30px;
                    padding-top: 12px;
                }
                p {
                    max-height: 56px;
                    color: #666;
                    line-height: 28px;
                    margin-top: 14px;
                    font-weight: 300;
                }
                .news_link-info {
                    flex: 1;
                    margin-right: 92px;
                }
                .news_link-img {
                    width: 260px;
                    overflow: hidden;
                    transition: all 0.6s ease;
                    img {
                        object-fit: cover;
                        height: 175px;
                        width: 100%;
                    }
                }
            }
            &:hover {
                &::after {
                    background: #0058ce;
                }
                .time {
                    color: #0058ce;
                }
                .arrow {
                    background: url(/assets/image/news/newsjtArrH.png) no-repeat
                        left top / 100% auto;
                }
                .article_content-left::after {
                    opacity: 1;
                    height: 100%;
                    top: 0;
                }
                .article_content-right {
                    .news_link-info {
                        h3 {
                            color: #0058ce;
                        }
                    }
                    .news_link-img {
                        transform: translateX(-30px);
                    }
                }
            }
        }
    }
    .content_year-list {
        width: 100%;
        background: #f7f7f7;
        border-bottom: 1px solid #d4d4d4;
        ul {
            display: flex;
            align-items: center;
            li {
                cursor: pointer;
                &.active {
                    color: #0058ce;
                    font-weight: 400;
                    font-size: 24px;
                }
            }
        }
    }
    .article_page {
        margin-top: 70px;
        display: flex;
        justify-content: center;
        align-items: center;
        span {
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 40px;
            height: 40px;
            background: #f2f2f2;
            transition: all 0.4s ease;
            vertical-align: middle;
            &:hover {
                background: #0058ce;
                .el-icon {
                    color: #fff;
                }
            }
        }
        ul {
            display: flex;
            justify-content: center;
            li {
                margin-left: 10px;
                cursor: pointer;
                width: 40px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                transition: all 0.4s ease;
                background: #f2f2f2;
                &:last-child {
                    margin-right: 10px;
                }
                &.active,
                &:hover {
                    background: #0058ce;
                    color: #fff;
                }
            }
        }
    }
}
</style>
